<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <van-tabbar v-model="active" active-color="#FD7753">
      <van-tabbar-item name="home" to="/">
        <span>首页</span>
        <template #icon="props">
          <img v-if="props.active" src="../assets/img/home_icon_act.png" />
          <img v-else src="../assets/img/home_icon.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="job" to="/job">
        <span>岗位</span>
        <template #icon="props">
          <img v-if="props.active" src="../assets/img/company_icon_act.png" />
          <img v-else src="../assets/img/company_icon.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="mine" to="/mine">
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="../assets/img/mine_icon_act.png" />
          <img v-else src="../assets/img/min_icon.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const active = ref("mine");
</script>

<style scoped></style>
